<template>
  <div>
    <div id="test" class="test"></div>
  </div>
</template>
<script>
import dataApi from "@/api/data";
export default {
  props: {
    city: String,
  },
  data() {
    return {
      items: [],
      chart: null,
      child_city: "北京",
      staItems: [
        "森林覆盖率",
        "林地面积",
        "活立木总蓄积",
        "森林面积",
        "森林蓄积",
        "人工林面积",
        "人工林蓄积",
        "天然林面积",
        "天然林蓄积",
        "乔木林单位面积蓄积量",
      ],
    };
  },
  mounted() {
    this.prepareData();
  },
  watch: {
    city(val) {
      this.child_city = val;
      this.prepareData();
    },
  },
  methods: {
    getMax(item) {
      let max = Number.MIN_VALUE;
      for (let i = 0; i < this.items.length; i++) {
        if (this.items[i]["city"] === this.child_city) {
          if (max < Number(this.items[i][item])) {
            max = Number(this.items[i][item]);
          }
        }
      }
      return max;
    },
    prepareData() {
      this.items = dataApi.getData().then((response) => {
        this.items = response.data.items;
        this.initChart();
      });
    },
    initChart() {
      this.chart = this.$echarts.init(document.getElementById("test"));
      let option = this.setChart();
      this.chart.setOption(option);
    },
    setChart() {
      let option = {
        title: {
          text: this.child_city+"林业信息显示",
          left: "center",
        },
        tooltip: {},
        legend: {
          data: ["2013", "2014", "2015", "2016", "2017", "2018"],
          bottom: 10,
        },
        radar: {
          shape: "circle",
          name: {
            textStyle: {
              color: "#fff",
              backgroundColor: "#999",
              borderRadius: 3,
              padding: [3, 5],
            },
          },
          indicator: [
            { text: "森林覆盖率(%)", max: this.getMax("森林覆盖率") },
            { text: "林地面积", max: this.getMax("林地面积") },
            { text: "活立木总蓄积", max: this.getMax("活立木总蓄积") },
            { text: "森林面积", max: this.getMax("森林面积") },
            { text: "森林蓄积", max: this.getMax("森林蓄积") },
            { text: "人工林面积", max: this.getMax("人工林面积") },
            { text: "人工林蓄积", max: this.getMax("人工林蓄积") },
            { text: "天然林面积", max: this.getMax("天然林面积") },
            { text: "天然林蓄积", max: this.getMax("天然林蓄积") },
            {
              text: "乔木林单位面积蓄积量",
              max: this.getMax("乔木林单位面积蓄积量"),
            },
          ],
        },

        series: [
          {
            name: "北京林业信息",
            type: "radar",
            //areaStyle: { normal: {} },
            data: [
              {
                value: this.getData("2013"),
                name: "2013",
              },
              {
                value: this.getData("2014"),
                name: "2014",
              },
              {
                value: this.getData("2015"),
                name: "2015",
              },
              {
                value: this.getData("2016"),
                name: "2016",
              },
              {
                value: this.getData("2017"),
                name: "2017",
              },
              {
                value: this.getData("2018"),
                name: "2018",
              },
            ],
          },
        ],
      };
      return option;
    },
    getData(year) {
      let res = [];
      for (let i = 0; i < this.items.length; i++) {
        if (
          this.items[i]["city"] === this.child_city &&
          this.items[i]["年份"] === year
        )
          this.staItems.forEach((item) => {
            res.push(Number(this.items[i][item]));
          });
      }
      //console.log(res);
      return res;
    },
  },
};
</script>
<style scoped>
.test {
  width: 100%;
  height: calc(80vh);
}
</style>
